<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple use of Cross-Site XMLHttpRequest (Using Access Control)</title>
<script type="text/javascript">
	var url = 'http://localhost:8080/access-control-with-post-preflight/';

	function callOtherDomain() {
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				var e = document.createElement('p');
				e.innerHTML = xhttp.responseText;
				document.getElementById("textDiv").appendChild(e);
			} else {
				console.log("XMLHttpRequest readyState:" + this.readyState
						+ " status: " + this.status);
			}
		};
		xhttp.open("POST", url, true);
		xhttp.setRequestHeader('X-PINGARUNER', 'pingpong');
		xhttp.setRequestHeader('Content-Type', 'application/text');
		xhttp.send();
	}
</script>
</head>
<body>
	<form id="controlsToInvoke" action="">
		<p>
			<input type="button" value="Click to Invoke Another Site"
				onclick="callOtherDomain()" />
		</p>
	</form>
	<p id="intro">This page POSTs XML data to another domain using
		cross-site XMLHttpRequest mitigated by Access Control. This is the
		preflight scenario and the invocation to a resource on another domain
		takes place using first an OPTIONS request, then an actual POST
		request.</p>
	<div id="textDiv">This XHTML document POSTs to another resource
		using cross-site XHR. If you get a response back, the content of that
		response should reflect what you POSTed.</div>
</body>
</html>
